<template>
    <div>
        <el-table :data="tableData" row-key="id">
            <!-- <el-table-column prop="roleName" label="角色名称">

            </el-table-column> -->
            <el-table-column prop="roleName" label="角色名称">
                <template #default="scope">
                    <el-popover placement="right" title="权限详情" :width="200" trigger="hover"
                        @before-enter="handleHover(scope.row)">
                        <template #reference>
                            <el-button class="m-2">{{ scope.row.roleName }} </el-button>
                        </template>
                        <template #default>
                            <el-tree :data="rightList" :props="defaultProps" :default-expand-all="true"
                                :render-content="renderContent"></el-tree>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>



            <el-table-column label="操作">
                <template #default="scope">
                    <el-button round type="primary" @click="handleUpdate(scope.row)">更新</el-button>
                    <el-popconfirm title="您确定要删除么?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button round type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="更新角色">
            <el-form ref="updateFormRef" :model="updateForm" :rules="updateRules" class="demo-ruleForm" status-icon>
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="updateForm.roleName" />
                </el-form-item>
                <el-form-item label="角色权限" prop="rights">
                    <el-tree :data="rightList" :props="defaultProps" show-checkbox node-key="path" ref="treeRef"
                        :check-strictly="true"></el-tree>
                </el-form-item>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm()">
                        更新
                    </el-button>
                </div>
            </el-form>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'
const tableData = ref([])

const rightList = ref([])

onMounted(() => {
    getList()
    getRightList()
})

const currentRights = ref([])
const handleHover = (rights) => {
    currentRights.value = rights.rights
}

const defaultProps = {
    children: 'children',
    label: 'title',
}

const getList = async () => {
    var res = await axios.get("/adminapi/roles")
    tableData.value = res.data
}

const getRightList = async () => {
    var res = await axios.get("/adminapi/rights/list")
    rightList.value = res.data
}

const renderContent = (
    h,
    {
        node,
        data,
        store,
    }
) => {
    return h(
        'span',
        {
            class: `custom-tree-node ${currentRights.value.includes(data.path) ? 'active' : ''} `,
        },
        h('span', null, node.label),
    )
}

const treeRef = ref()

const handleUpdate = (item) => {
    dialogVisible.value = true;
    updateForm.roleName = item.roleName
    currentItem.value = item

    // 设置rights给tree
    nextTick(() => {
        treeRef.value.setCheckedKeys(JSON.parse(item.rights))
    })

}

const dialogVisible = ref(false)

const updateFormRef = ref();

const currentItem = ref({});

const updateForm = reactive({
    roleName: ""
})

const updateRules = reactive({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
    ]
})

// 弹出框确定方法
const handleConfirm = async () => {
    // console.log(updateForm.roleName, treeRef.value.getCheckedKeys())
    await axios.put(`/adminapi/roles/${currentItem.value.id}`, {
        roleName: updateForm.roleName,
        rights: JSON.stringify(treeRef.value.getCheckedKeys())
    })

    await getList();

    dialogVisible.value = false;

}

// 删除
const handleDelete = async ({ id }) => {
    var res = await axios.delete(`/adminapi/roles/${id}`)
    if (res.data.code === 0) {
        ElMessage({
            message: '执行成功',
            type: 'success',
        })
        await getList();
    } else {
        ElMessage.error(res.data.msg)
    }


    dialogVisible.value = false;
}

</script>
<style lang="scss" scoped>
:deep(.active) {
    color: #F56C6C
}
</style>